import React, { Component } from 'react';
import { Button, Modal, Input, Radio, message } from 'antd';
import url from '@/config/url';
import axios from '@/http/http';
class ModalCom extends Component {
    state = {
        isModalVisible: false,  // 默认不显示模态框
        userinfo: {
            username: '',
            password: '',
            email: '',
            gender: 1,  // 性别，合法值为1男、2女、3保密
            mobile: ''  // number
        }
    }
    render() {
        const { username, password, email, gender, mobile } = this.state.userinfo
        return (
            <Modal title={this.props.modalTitle} visible={this.state.isModalVisible} onOk={this.handleOk} onCancel={this.handleCancel}>
                <p><Input placeholder="用户名" value={username} name='username' onChange={this.onChange} /></p>
                <p><Input placeholder="密码" value={password} name='password' onChange={this.onChange} /></p>
                <p><Input placeholder="邮箱" value={email} name='email' onChange={this.onChange} /></p>
                <div>
                    <Radio.Group value={gender} name='gender' onChange={this.onChange} >
                        <Radio value={1}>男</Radio>
                        <Radio value={2}>女</Radio>
                        <Radio value={3}>保密</Radio>
                    </Radio.Group>
                </div>
                <p><Input placeholder="手机号" value={mobile} name='mobile' onChange={this.onChange} /></p>
            </Modal>
        );
    };
    showModal = () => {
        this.setState({
            isModalVisible: true
        })
    }
    // 点击确认事件
    handleOk = () => {
        this.setState({
            isModalVisible: false
        })
        // 调用添加用户接口
        axios.post(url.adduser, this.state.userinfo).then(res => {
            console.log(res);
            if (res.data.errNo == 0) {
                // 添加成功
                message.success('添加成功', 1, () => {
                    // 重新请求用户列表接口,数据就更新啦
                    this.props.loadData();
                    // 清空表单项
                    this.setState({
                        userinfo: {
                            username: '',
                            password: '',
                            email: '',
                            gender: 1,  // 性别，合法值为1男、2女、3保密
                            mobile: ''  // number
                        }
                    })
                })
            } else {
                // 添加失败
                message.error(res.data.errText, 1)
            }
        }).catch(e => { })

    }

    // 点击取消事件
    handleCancel = () => {
        this.setState({
            isModalVisible: false
        })
    };
    // 表单元素发生改变时触发该事件
    onChange = (e) => {
        // console.log(e.target.value);
        // console.log(e.target.name);
        const key = e.target.name
        this.setState({
            userinfo: {
                ...this.state.userinfo,
                [key]: e.target.value
            }
        })




    }
}

export default ModalCom;
